<template>
	<div>
		<div class="list">
			<dl v-for="v in list" :key="v.id" @click="$router.push('/detail/' + v.id)">
				<dt><img :src="v.url" alt=""></dt>
				<dd>
					<h3>{{ v.title }}</h3>
					<p>{{ v.desc }}</p>
				</dd>
			</dl>
		</div>
	</div>
</template>


<script lang="ts" setup>
import { useStore } from 'vuex'
import { RootState } from '@/store'
import { onMounted } from 'vue';
import { computed } from '@vue/reactivity';

const store = useStore<RootState>();
const list = computed(() => store.state.list)

onMounted(() => {
	store.dispatch('fetchList', 123)
})

</script>

<style lang="scss" scoped>
dl {
	display: flex;
	border-bottom: 1px solid #ccc;
}
</style>